<template>
  <div class="page_wrap">
    <div class="index_row">
      <div class="header_img">
        <img src="../../../static/images/6084ce779a984.png" alt="" />
      </div>
      <!-- <div class="titel">登录</div> -->
      <div class="input_wrap">
        <div>
          <el-input
            prefix-icon="el-icon-user-solid"
            clearable
            v-model="loginform.username"
            placeholder="请输入企业全称"
          ></el-input>
        </div>
        <div>
          <el-input
            show-password
            prefix-icon="el-icon-s-goods"
            clearable
            v-model="loginform.password"
            placeholder="请输入登录密码"
          ></el-input>
        </div>
      </div>
      <div @click="hanldlogin" class="input_but">
        <div class="input_text">
          <div>登录</div>
        </div>
      </div>
      <div class="foot_warp">
        <div class="foot_text">忘记密码</div>
        <div class="foot_right">
          <div>还没有账号？</div>
          <div class="foot_text" @click="haldregister">去注册</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { login } from "@/api/login";
import { setToken, getToken } from "@/utils/auth";
export default {
  data() {
    return {
      loginform: {
        username: "",
        password: "",
      },
    };
  },
  created() {
    this.userdata();
  },
  methods: {
    userdata() {
      this.loginform.username = getToken("username");
    },
    haldregister() {
      this.$emit("hanldlogin", 2);
    },
    hanldlogin() {
      let _this = this;
      if (!this.loginform.username) {
        return this.$message.error("请输入用户名");
      }
      if (!this.loginform.password) {
        return this.$message.error("请输入密码");
      }
      login(_this.loginform).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.$message.success("登录成功");
          setToken("token", res.token);
          setToken("username", _this.loginform.username);
          setToken('user', JSON.stringify(res.user) )
          this.$router.push("/home");
        }
      });
    },
  },
};
</script>
<style scoped>
.index_wrap {
  width: 100%;
  min-width: 898px;
  min-height: 100vh;
  background-color: #f6f6f6;
  display: flex;
  justify-content: center;
  align-items: center;
}
.index_mian {
  width: 640px;
  height: 540px;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.titel {
  font-size: 20px;
  margin-bottom: 10px;
}
.input_wrap {
  line-height: 70px;
}
/deep/ .el-input {
  width: 420px !important;
}
/deep/ .el-input__inner {
  height: 46px !important;
  font-size: 18px;
}
/deep/.el-input--prefix .el-input__inner {
  padding-left: 40px;
}
.input_but {
  margin-top: 20px;
  width: 420px;
  background-color: #3dbbb8;
  height: 46px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.input_but:hover {
  cursor: pointer;
}
.input_text {
  color: #fff;
  font-size: 20px;
}
.foot_warp {
  margin-top: 20px;
  width: 420px;
  display: flex;
  justify-content: space-between;
}
.foot_text {
  color: #2e82ff;
}
.foot_text:active {
  opacity: 0.8;
}
.foot_text:hover {
  cursor: pointer;
}
.foot_right {
  display: flex;
  justify-content: space-between;
}
.header_img {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
.header_img img {
  width: 200px;
  object-fit: contain;
}
</style>